<!--
1、局部引用
  import SunUpdataAdd from '@/sun-components/SunUpdataAdd'
2、注册
  components: { SunUpdataAdd },
3、页面使用 title 和 tabList 存其一即可 当tabList长度为0时显示title
  <sunUpdataAdd :title="this.$route.meta.title" :tab-list="tabList" />
4、data变量
  tabList: [
    { id: 1, old_id: 1, name: '全部', value: 'all', type: 'primary' },
    { id: 2, old_id: 1, name: '导航一', value: 'new', type: 'mini' },
    { id: 3, old_id: 1, name: '导航二', value: 'old', type: 'mini' }
  ],
  tabItem: {} || { id: 1, old_id: 1, name: '全部', value: 'all', type: 'primary' },
  4.1、tabList参数诠释：
    id 唯一key 用于点击事件条件
    old_id 默认为tabList[0].id 点击时会自动更新
    name tab的显示字段
    value 接口更新数据判断条件或可看做tab更新数据请求时的参数配置
    type 取值,选中 primary 未选中mini 默认tabList列表第一个为primary
  4.2、tabItem 注意事项
      1、页面渲染有tabItem.value条件：在data中应该直接复用tabList[0]作为默认数据 tabItem: { id: 1, old_id: 1, name: '全部', value: 'all', type: 'primary' }
      2、页面渲染无tabItem.value条件：在data中可设置 tabItem: {}, 在created函数中设置this.tabItem = this.tabList[0]
5、tab点击事件
  5.1、tab 左侧导航事件
    async tabHeaderSelect(id) {
      const _that = this
      _that.tabList.forEach((item) => {
        if (item.old_id === id) {
          return false
        }
        if (item.id === id) {
          item.type = 'primary'
          _that.tabItem = item
          _that.upData()
        } else {
          item.type = 'mini'
        }
        item.old_id = id
      })
    },
  5.2、tab 右侧操作按钮
    async tabHeaderBtn(id) {
      const _that = this
      _that.tabListRight.forEach((item) => {
        if (item.id === id) {
          /** 页面逻辑 */
        }
      })
    },
-->
<template>
  <el-tabs type="border-card" class="sun-el-tabs">
    <div class="flex_center_align flex_between" style="position: relative;" :style="{ 'margin-top': top }">
      <div class="flex_center_align">
        <span v-for="item in tabList" :key="item.id">
          <el-button
            style="margin-right: 10px;position: relative;margin-top: 5px;"
            :type="item.type || 'primary'"
            size="mini"
            :loading="item.loading"
            :disabled="item.disabled ? item.disabled : false"
            @click="tabSelect(item)"
          >
            {{ item.name }}
            <div v-if="item.total" class="dot flex_center_align" :style="{ 'left': badgeLeft }">{{ item.total }}</div>
          </el-button>
        </span>
        <div v-if="tabList.length === 0" class="style-title">
          {{ title }}
        </div>
        <div v-if="hint !== ''" style="color: #FF0000;">
          {{ hint }}
        </div>
      </div>
      <div class="flex_center_align">
        <div v-if="JSON.stringify(count) !== '{}'" style="font-size: 16px;color: #FF0000;margin-right: 40px;">
          <span>{{ `评价门次：${count.group_count}` }}</span>
          <span style="padding-left: 20px;">{{ `参评教师人次：${count.teacher_count}` }}</span>
          <span style="padding-left: 20px;">{{ `参评教师：${count.evaluation_teacher_count}` }}</span>
        </div>
        <el-button
          v-if="showAdddata"
          type="primary"
          size="mini"
          style="margin-right: 10px;"
          @click="addData()"
        >
          <i class="el-icon-plus" />
          {{ addTitle }}
        </el-button>

        <span v-for="item in tabListRight" :key="item.id">
          <el-button
            style="margin-right: 10px;"
            :type="item.type || 'primary'"
            size="mini"
            :loading="item.loading"
            :disabled="item.disabled ? item.disabled : false"
            @click="tabBtn(item)"
          >
            <i :class="item.icon" />
            {{ item.name }}
          </el-button>
        </span>

        <el-button
          v-if="showUpdate"
          style="width: 70px"
          size="mini"
          type="mini"
          :loading="is_upData"
          @click="upData()"
        >
          <i v-if="!is_upData" class="el-icon-refresh-right" />
          刷 新
        </el-button>
      </div>
    </div>
  </el-tabs>
</template>
<script>
export default {
  name: 'UpdataAdd',
  props: {
    count: {
      type: Object,
      default: function() {
        return {}
      }
    },
    showAdddata: {
      type: Boolean,
      default: true
    },
    showUpdate: {
      type: Boolean,
      default: true
    },
    title: {
      type: String,
      default: ''
    },
    addTitle: {
      type: String,
      default: '添加'
    },
    tabList: {
      type: Array,
      default: function() {
        return []
      }
    },
    tabListRight: {
      type: Array,
      default: function() {
        return []
      }
    },
    hint: {
      type: String,
      default: ''
    },
    top: {
      type: String,
      default: '0px'
    },
    badgeLeft: {
      type: String,
      default: '70px'
    }
  },
  computed: {
    is_upData() {
      return this.$parent.$parent.listLoading
    }
  },
  methods: {
    tabSelect(item) {
      this.$parent.$parent.tabHeaderSelect(item.id)
    },
    tabBtn(item) {
      this.$parent.$parent.tabHeaderBtn(item.id)
    },
    addData() {
      const parent = this.$parent.$parent
      const obj = parent.formData
      Object.getOwnPropertyNames(obj).forEach(function(key) {
        if (obj[key] === 0) {
          parent.formData[key] = 0
          return
        }
        if (!obj[key]) {
          if (!obj[key]) {
            parent.formData[key] = ''
            return
          }
        }
        // String 类型
        if (obj[key].constructor === String) {
          parent.formData[key] = ''
          return
        }
        // Number 类型
        if (obj[key].constructor === Number) {
          parent.formData[key] = 0
          return
        }
        // Array 类型
        if (obj[key].constructor === Array) {
          parent.formData[key] = []
          return
        }
        // Object 类型
        if (obj[key].constructor === Object) {
          parent.formData[key] = {}
          return
        }
        // Boolean 类型
        if (obj[key].constructor === Boolean) {
          parent.formData[key] = true
          return
        }
      })
      parent.addData(false)
    },
    upData() {
      this.$parent.$parent.upData()
    }
  }
}
</script>
<style lang="scss" scoped>
  @import '@/styles/sun-style.scss';
.style-title{
  position: absolute;
  font-weight: bold;
  margin-right: 10px;
}
</style>
